<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>我发布的活动列表</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="css/daterangepicker.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<style>
	[v-cloak] {
		display: none!important;
	}
	.my-over-close {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		cursor: pointer;
	}
	.flex {
		display:box;
		display:-webkit-box;
		display:-webkit-flex;
		display:-moz-box;
		display:-ms-flexbox;
		display: flex;
		height:100vh;
	}
	.flex-column {
		flex-direction: column;
	}
</style>
</head>
<body>
<div id="app" v-cloak class="flex flex-column">	
	<header>
	</header>
	<div class="header-space" style="flex-shrink: 0;"></div>
	<section class="section91 mt40" style="flex:auto;">
		<div class="content">
			<div class="top-operate">
				<a href="49.html" class="btn">发布活动</a>
			</div>
			<ul class="list style2">
				<li
					v-for="(item, index) in activityList"
					:key="item.id"
				>
					<div class="img"><a :href="'44.html?id=' + item.id"><img :src="item.cover" alt=""></a></div>
					<div class="btm">
						<div class="time">{{item.start}}<span class="r">人数：{{item.total}}</span></div>
						<h3><a :href="'44.html?id=' + item.id">{{item.name}}</a></h3>
						<div class="info"><span class="number">{{item.num}}人已报名</span><span class="r orange">{{item.status}}</span></div>
						<div class="operate" v-if="item.status == '报名中'">
							<a :href="'49.html?id=' + item.id" v-if="item.status_online == 1" class="btn btn-white">编辑</a>
							<a
								v-if="item.status_online == 1"
								href="javascript:void(0);"
								@click="groundingActivity(index)"
								class="btn btn-white">上架
							</a>
							<a
								v-if="item.status_online == 0"
								href="javascript:void(0);"
								@click="groundingActivity(index)"
								class="btn btn-white">下架
							</a>
							<a
								v-if="item.status_online == 1"
								href="javascript:void(0);"
								@click="deleteActivity(index)"
								class="btn btn-white"
							>删除</a>
						</div>
						<div class="operate" v-if="item.status == '进行中'">
							<a :href="'49.html?id=' + item.id" v-if="item.status_online == 1" class="btn btn-white">编辑</a>
							<a
								v-if="item.status_online == 1"
								href="javascript:void(0);"
								@click="groundingActivity(index)"
								class="btn btn-white">上架
							</a>
							<a
								v-if="item.status_online == 0"
								href="javascript:void(0);"
								@click="groundingActivity(index)"
								class="btn btn-white">下架
							</a>
							<a
								v-if="item.status_online == 1"
								href="javascript:void(0);"
								@click="deleteActivity(index)"
								class="btn btn-white"
							>删除</a>
						</div>
						<div class="operate" v-if="item.status == '已结束'">
							<a
								href="javascript:void(0);"
								@click="deleteActivity(index)"
								class="btn btn-white"
							>删除</a>
						</div>
						<div class="operate" v-if="item.status == '已下线'">
							<a
								v-if="item.status_online == 1"
								href="javascript:void(0);"
								@click="groundingActivity(index)"
								class="btn btn-white">上架
							</a>
							<a
								v-if="item.status_online == 0"
								href="javascript:void(0);"
								@click="groundingActivity(index)"
								class="btn btn-white">下架
							</a>
							<a
								v-if="item.status_online == 1"
								href="javascript:void(0);"
								@click="deleteActivity(index)"
								class="btn btn-white"
							>删除</a>
						</div>
					</div>
				</li>
			</ul>
			<!-- <div class="g-prvNxt">
				<a href="" class="prev">&nbsp;</a>
				<a href="">1</a>
				<a href="" class="on">2</a>
				<a href="">3</a>
				<a href="">4</a>
				<a href="">5</a>
				<a href="">6</a>
				<a href="">7</a>
				<a href="">8</a>
				<a href="">9</a>
				<a href="">10</a>
				<a href="" class="next">&nbsp;</a>
				<select name="" id="">
					<option value="">10条/页</option>
					<option value="">20条/页</option>
					<option value="">30条/页</option>
					<option value="">40条/页</option>
					<option value="">50条/页</option>
				</select>
				跳至 
				<input type="text" value="5" class="input">
				页
				<input type="submit" value="确定" class="btn">
			</div> -->
			<div class="g-prvNxt" v-if="activityList.length != 0">
				<a @click="getPage('pre')" href="javascript:void(0)" class="prev">&nbsp;</a>
				<a @click="getPage(item)" v-for="(item, i) in allPage" href="javascript:void(0)" :class="{on: page==item}">{{item}}</a>
				<a @click="getPage('next')" href="javascript:void(0)" class="next">&nbsp;</a>
				<select name="" id="pageSize">
					<option value="10">10条/页</option>
					<option value="20">20条/页</option>
					<option value="">30条/页</option>
					<option value="">40条/页</option>
					<option value="">50条/页</option>
				</select>
				跳至 
				<input type="text" value="" id="pageVal" class="input">
				页
				<input @click="changePage" type="submit" style="line-height: 32px;" value="确定" class="btn">
			</div>
		</div>
	</section>
	<div
		v-if="showGroundingActivityToast"
		class="alert alert-conform show"
	>
		<div class="my-over-close" @click="showGroundingActivityToast = false"></div>
		<div class="box">
			<div class="title">提示</div>
			<div class="con">确定要{{showGroundingTxt ? '上架' : '下架'}}吗？</div>
			<div class="operate">
				<a href="javascript:void(0);" class="btn btn-white" @click="hideToast(1)">取消</a>
				<a href="javascript:void(0);" class="btn" @click="confirmOperate(1)">确定</a>
			</div>
		</div>
	</div>
	<div
		v-if="showDeleteActivityToast"
		class="alert alert-conform show"
	>
		<div class="my-over-close" @click="showDeleteActivityToast = false"></div>
		<div class="box">
			<div class="title">提示</div>
			<div class="con">确定要删除吗？</div>
			<div class="operate">
				<a href="javascript:void(0);" class="btn btn-white" @click="hideToast(2)">取消</a>
				<a href="javascript:void(0);" class="btn" @click="confirmOperate(2)">确定</a>
			</div>
		</div>
	</div>
	<footer id="footer"></footer>
</div>	
<script src="js/jquery.min.js"></script>
<script src="js/slide.min.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<script src="js/main.js"></script>
<script src="js/vue.js"></script>
<script src="js/request.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	$(function(){
		$("header").load("./enterpriseCommon/header.html");
		$("#footer").load("./enterpriseCommon/footer.html");
	})
	var vm = new Vue({
		el: '#app',
		data () {
			return {
				showGroundingTxt: true,
				showGroundingActivityToast: false,
				showDeleteActivityToast: false,
				nowClickActivityId: '',
				nowClickActivityPos: '',
				activityList: [],
				page: 1,
				allPage: [],
				paegSize: 10,
				clickIndex: ''
			}
		},
		mounted () {
			this.fetchMyActivityList();
		},
		methods: {
			fetchMyActivityList() {
				var vm = this;
				var url = 'enterprise/activity/list';
				request( url, 'GET', {
					page: this.page
				},
					function (res) {
						console.log(res);
						vm.activityList = res.data.recruit;
						var allPage = Math.ceil(res.data.total / vm.paegSize);
						var pages = [];
						for(var i = 1; i <= allPage; i++){
							pages.push(i);
						}
						vm.allPage = pages;
					},
					function (err) {
						var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
					}
				)
			},
			getPage(i) {
				var vm = this;
				if(!i){
					return
				}
				if(i == "pre"){
					if(vm.page == 1){
						return
					}
					i = vm.page - 1;
				} else if(i == "next"){
					if(vm.page == vm.allPage.length){
						return
					}
					i = vm.page+1
				} else if(typeof i =="string"){
					i = parseInt(i)
					if(!i){
						i = vm.page 
					} else {
						if(i>vm.allPage.length){
							i = vm.allPage.length
						} else if(i<=0){
							i = 1
						} 
					}
				}
				vm.page = i;
				vm.fetchMyActivityList();
			},
			changePage(){
				this.getPage($("#pageVal").val());
			},
			groundingActivity(index) {
				// console.log(index);
				this.showGroundingActivityToast = true;
				this.clickIndex = index;
				if (this.activityList[index].status_online === 0) {
						this.showGroundingTxt = false;
					} else if (this.activityList[index].status_online === 1) {
						this.showGroundingTxt = true;
					}
			},
			deleteActivity(index) {
				// console.log(index);
				this.showDeleteActivityToast = true;
				this.clickIndex = index;
			},
			hideToast(type) {
				if(type === 1) {
					this.showGroundingActivityToast = false;
				}
				if(type === 2) {
					this.showDeleteActivityToast = false;
				}
			},
			confirmOperate(type) {
				var vm = this;
				if(type === 1) {
					var doDownUpStatus = 0;
					if (this.activityList[this.clickIndex].status_online === 0) {
						doDownUpStatus = 1;
					}
					request( 'enterprise/activity/doDownUp/' + this.activityList[this.clickIndex].id, 'PUT', JSON.stringify({
						status: doDownUpStatus
					}),
						function (res) {
							console.log(res);
							vm.$message.success(res.message);
							vm.showGroundingActivityToast = false;
							vm.fetchMyActivityList();
						},
						function (err) {
							var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
							vm.$message({
								type: 'warning',
								message: msg
							})
						}
					)
				}
				if(type === 2) {
					request('enterprise/activity/' + this.activityList[this.clickIndex].id, 'DELETE', '',
						function (res) {
							console.log(res);
							vm.$message('删除成功');
							vm.showDeleteActivityToast = false;
							vm.activityList.splice(vm.clickIndex,1);
						},
						function (err) {
							var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
							vm.$message({
								type: 'warning',
								message: msg
							})
						}
					)
				}
			}
		}
	})
</script>
</body>
</html>